<template>
	<div class="base-wrap" v-wechat-title="$route.meta.title = seoTitle" v-if="data">
		<div class="header clearfix">
		    <ul class="nav">
		        <li :class="{active:$route.params.id == baseData.id}" v-for="(baseData,index) in baseDatas" @click="baseBtn(index)"><router-link :to="{name:'base',params:{park_id:$route.params.park_id,id:baseData.id}}">{{ baseData.title }}</router-link></li>
		    </ul>
		</div>
        <div v-if="$route.params.id == baseData.id" v-for="(baseData,index) in baseDatas">
            <div class="banner"><img :src="baseData.image" alt=""></div>
            <div class="base-content" v-html="baseData.content"></div>
        </div>
        <footer-view></footer-view>
	</div>
</template>

<script>
	export default{
		data(){
			return{
			    data: '',
				baseDatas:[],
				baseIndex:this.$route.params.id
			}
		},
		created(){
			this.baseGet()
		},
        computed: {
            seoTitle() {
                let tt = '';
                tt += this.data.city + this.data.city_first + this.data.title + ' - 阿力士';
                return tt
            }
        },
		methods:{
			baseGet(){
				this.$get('/api/channel/'+this.$route.params.park_id).then(res=>{
					if(res.code == 0){
					    this.data = res.data[0];
					    console.log(this.data);
						this.baseDatas = this.data.park_baner;
                    }
				})
			},
			baseBtn(v){
				this.baseIndex = v
			}
		},
        watch: {
            '$route'(to, from) {
                this.data = '';
                this.baseGet();
            }
        }
	}
</script>

<style scoped>
	@import '../assets/css/style.css';
	.base-content{
		padding: 15px;
        background-color: #fff;
	}
	img{
		width: 100%;
		height: auto;
	}
</style>
